<!-- 这里是登录成功后首页 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/index.js"></script>
		<link rel="stylesheet" href="../css/index_test.css" />
		<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
		<title></title>
	</head>
	<body>
		<div class="nav_div">
			<div class="d-center">
				<div class="navL">
					欢迎来到youxuan！
					<a href="#">用户202205</a>
				</div>
				<div class="navR">
					<ul>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li>
							<a href="#">我的youxuan</a>
						</li>
						<li>
							<a href="#">youxuan会员</a>
						</li>
						<li>
							<a href="#">企业采购</a>
						</li>
						<li>
							<a href="#">关注youxuan</span></a>
						</li>
						<li>
							<a href="#">客户服务</span></a>
						</li>
						<li>
							<a class="style-border-none" href="#">网站导航</span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="head d-center">
			<div class="logo">
				<a href="#"><img src="../photos/logo.png" /></a>
			</div>
			<div class="head-search">
				<input type="text" placeholder="请输入商品..." />
				<button>搜索</button>
				<ul>
					<li><a class="style-red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="shopCar">
				<span><i class="fa fa-cart-plus"></i></span>
				<span><a href="#">我的购物车</a></span>
				<span class="count">0</span>
			</div>
		</div>

		<div class="d-center">
			<div class="top-type">
				<ul>
					<li><a href="#">新鲜果蔬</a></li>
					<li><a href="#">手机</a></li>
					<li><a href="#">司法拍卖</a></li>
					<li><a href="#">全球购</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">二手拍卖</a></li>
				</ul>
			</div>
		</div>

		<hr class="spacer-red" />

		<div class="d-center">
			<div class="center-left">
				<div class="goods-title">全部商品分类</div>
				<ul>
					<li>电脑 / 办公 / 文具<i class="fa fa-angle-right"></i></li>
					<li>工业园 / 商品 / 定制<i class="fa fa-angle-right"></i></li>
					<li>家电 / 手机 / 数码<i class="fa fa-angle-right"></i></li>
					<li>家具 / 家装 / 家居<i class="fa fa-angle-right"></i></li>
					<li>女装 / 男装 / 内衣<i class="fa fa-angle-right"></i></li>
					<li>女鞋 / 男鞋 / 运动<i class="fa fa-angle-right"></i></li>
					<li>汽车 / 珠宝 / 箱包<i class="fa fa-angle-right"></i></li>
					<li>食品 / 生鲜 / 健康<i class="fa fa-angle-right"></i></li>
					<li>母婴 / 童装 / 潮玩<i class="fa fa-angle-right"></i></li>
					<li>美妆 / 洗护 / 宠物<i class="fa fa-angle-right"></i></li>
					<li>娱乐 / 图书 / 鲜花<i class="fa fa-angle-right"></i></li>
					<li>零食 / 饮料 / 水果<i class="fa fa-angle-right"></i></li>
					<li>安装 / 维修 / 清洗<i class="fa fa-angle-right"></i></li>
				</ul>
			</div>

			<div class="center-banner">
				<ul id="imgList">
					<li><img src="../photos/lunbo0.png" alt=""></li>
					<li><img src="../photos/lunbo1.png" alt=""></li>
					<li><img src="../photos/lunbo2.png" alt=""></li>
					<li><img src="../photos/lunbo3.png" alt=""></li>
					<li><img src="../photos/lunbo0.png" alt=""></li>  <!-- 此处要填补第一张图 -->
				</ul>
				<ul id = "icolist">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
				<div class="prve"><</div>
				<div class="next">></div>
			</div>
			<script>
				var eprve = document.querySelector('.prve'); //获取右击
				var enext = document.querySelector('.next'); //获取左击
				var esico = document.getElementById('icolist').getElementsByTagName('li'); //获取li
				var eicolist = document.querySelector('#icolist'); //获取icolist
				var eimglist = document.querySelector('#imgList'); //获取imglist
				var left = 0; //获取向左偏移量
				var timer;  //设置时间
				run(); 
				function run(){//设置run启动函数
					if(left <= -2800){ //当所有图片到底时，回到起点
						left = 0;
					}
					var m = Math.floor(-left / 700); //获取当前是图片几
					imgList.style.marginLeft = left + 'px'; //设置向左移动
					var n = (left % 700 == 0) ? n = 2500 :n =10; //当移动至新图片时，设置时间，用于增加时间使得图片停止移动
					left -= 10;
					timer = setTimeout(run,n)
					icochange(m);
				}
				function imgchange(n){ //用于左右点击更改图片移动方向
					let lt = - (n*700);
					imgList.style.marginLeft = lt + 'px';
					left = lt;
				}
				eprve.onclick = function(){
					let prevgo = Math.floor(-left / 700) - 1;
					if(prevgo ==-1){
						prevgo=3;
					}
					imgchange(prevgo);
				}
				enext.onclick = function(){
					let nextgo = Math.floor(-left / 700) + 1;
					if(nextgo == 4){
						nextgo=0;
					}
					imgchange(nextgo);
				}
				function icochange(m){ //使得圆点随图片位置变红
					for(let index = 0;index < esico.length;index++){
						esico[index].style.backgroundColor='';
					}
					if(m < esico.length){
						esico[m].style.backgroundColor = 'red';
					}
				}
				eicolist.onclick = function(){ //点击圆点进行切换图片	
					var tg = event.target;
					let ico = tg.innerHTML-1;
					imgchange(ico);
					icochange(ico);
				}
				eimglist.onmouseover = function(){ //触碰停止自动播放
					clearTimeout(timer);
				}
				eimglist.onmouseout = function(){ // 移出进行自动播放
					run();
				}
			</script>

			<div class="center-right">
				<div class="center-right-title">
					 <h3>欢迎</h3>
					 <h3>202205</h3>
				</div>
				<div class="function-top">
					<ul>
						<i class="fa fa-user-circle" style="font-size:60px;margin-top: 38px;margin-left: 95px;"></i>
					</ul>
				</div>
				<div class="function-bottom">
					<ul>
						<li>
							<span><i class="fa fa-star" style="font-size:24px"></i></span>
							<p><a href="">宝贝收藏</a></p>
							
						</li>
						<li>
							<span><i class="fa fa-user-circle" style="font-size:24px"></i></span>
							<p><a href="">个人信息</a></p>
						</li>

					</ul>
					<ul>
						<li>
							<span><i class="fa fa-smile-o" style="font-size:24px"></i></span>
							<p><a href="">收藏的店</a></p>
						</li>
						<li>
							<span><i class="fa fa-history"style="font-size:24px"></i></span>
							<p><a href="">我的足迹</a></p>
						</li>
					</ul>
					<ul>
						<li>
							<span><i class="fa fa-truck"style="font-size:24px"></i></span>
							<p><a href="">查看物流</a></p>
						</li>
						<li>
							<span><i class="fa fa-volume-control-phone"style="font-size:24px"></i></span>
							<p><a href="">联系客服</a></p>
						</li>
					</ul>
					<ul>
						<li>
							<span><i class="fa fa-yen"style="font-size:24px"></i></span>
							<p><a href="">退货售后</a></p>
						</li>
						<li>
							<span><i class="fa fa-commenting-o"style="font-size:24px"></i></span>
							<p><a href="">暂待评价</a></p>
						</li>
					</ul>
				</div>
			</div>
		</div>


		<div class="d-center">
			<div class="commend">
				<div class="electric">
					<h1><i class="fa fa-gratipay">&nbsp;&nbsp;猜你喜欢</i></h1>
				</div>
				<div class="commend-content">
					<img class="commend-pic" src="../photos/iphone15B.jpg" />
					<div class="commend-text"><a>潮店数码</a></div>
				</div>
				<div class="commend-content">
					<img class="commend-pic" src="../photos/weiyi.jpg" />
					<div class="commend-text"><a>服装时尚</a></div>
				</div>
				<div class="commend-content">
					<img class="commend-pic" src="../photos/shafa.jpg" />
					<div class="commend-text"><a>家享生活</a></div>
				</div>
				<div class="commend-content">
					<img class="commend-pic" src="../photos/shuiguo.jpg" />
					<div class="commend-text"><a>新鲜果蔬</a></div>
				</div>
				<div class="commend-content">
					<img class="commend-pic" src="../photos/xie.jpg" />
					<div class="commend-text"><a>运动户外</a></div>
				</div>

			</div>
		</div>
		

		
		<div class="d-center">
			<div class="electric">
				<h1>图书</h1>
				<ul>
					<li><a class="style-red" href="#">热门</a></li>
					<li><a href="#">年中大促</a></li>
					<li><a href="#">小说</a></li>
					<li><a href="#">诗歌集</a></li>
					<li><a href="#">散文随笔</a></li>
					<li><a href="#">科幻小说</a></li>
					<li><a href="#">青春文学</a></li>
					<li><a href="#">中外名著</a></li>
					<li><a class="none-right-border" href="#">新品推荐</a></li>
				</ul>
			</div>
			
			<div class="electric-column-1">
				<div class="electric-text">
					<div><a href="#">动漫</a></div>
					<div><a href="#">悬疑</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">传记</a></div>
					<div><a href="#">武侠</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">儿童文学</a></div>
					<div><a href="#">世界名著</a></div>
				</div>
				<img src="../photos/20006.png" />
			</div>
			
			<div class="electric-column-2">
				<img src="../photos/10004.png" />
				<ul>
					<li class="pic-dot style-white"></li>
					<li class="pic-dot"></li>
					<li class="pic-dot"></li>
				</ul>
			</div>
			
			<div class="electric-column-3">
				<img src="../photos/20001.png" />
				<img src="../photos/20004.png" />
			</div>
			
			<div class="electric-column-4">
				<img src="../photos/20007.png" />
				<img src="../photos/30008.png" />
			</div>
			
			<div class="electric-column-5">
				<img src="../photos/30001.png" />
				<img src="../photos/20005.png" />
			</div>
		</div>
		
		<div class="d-center">
			<div class="electric">
				<h1>手机数码</h1>
				<ul>
					<li><a class="style-red" href="#">热门</a></li>
					<li><a href="#">年中大促</a></li>
					<li><a href="#">5G手机</a></li>
					<li><a href="#">手机饰品</a></li>
					<li><a href="#">智能手表</a></li>
					<li><a href="#">笔记本电脑</a></li>
					<li><a href="#">耳机</a></li>
					<li><a href="#">数码相机</a></li>
					<li><a class="none-right-border" href="#">新品手机</a></li>
				</ul>
			</div>
			
			<div class="electric-column-1">
				<div class="electric-text">
					<div><a href="#">平板电脑</a></div>
					<div><a href="#">拍立得</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">智慧屏</a></div>
					<div><a href="#">轻薄本</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">蓝牙耳机</a></div>
					<div><a href="#">充电宝</a></div>
				</div>
				<img src="../photos/pailide.png" />
			</div>
			
			<div class="electric-column-2">
				<a href="../html/xijie_test.html"><img src="../photos/pg.png" style="height: 300px;"/></a>
				<ul>
					<li class="pic-dot style-white"></li>
					<li class="pic-dot"></li>
					<li class="pic-dot"></li>
				</ul>
			</div>
			
			<div class="electric-column-3">
				<img src="../photos/watch.png" style="height: 180px;"/>
				<img src="../photos/ipad.png" />
			</div>
			
			<div class="electric-column-4">
				<img src="../photos/diannao.png" style="height: 150px;"/>
				<img src="../photos/xiangji.png" />
			</div>
			
			<div class="electric-column-5">
				<img src="../photos/erji.png" style="height: 150px;"/>
				<img src="../photos/zhihuiping.png" style="height: 150px;"/>
			</div>
		</div>
		
		<div class="bottom">
			<div class="d-center">
				<div class="bottom-top">
					<ul>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
					</ul>
				</div>
				
				<div class="bottom-center">
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>精选保障</p>
						<ul>
							<li><a href="#">发票保障</a></li>
							<li><a href="#">售后规则</a></li>
							<li><a href="#">物流时效保障</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>支付方式</p>
						<ul>
							<li><a href="#">微信支付</a></li>
							<li><a href="#">支付宝</a></li>
							<li><a href="#">数字人民币</a></li>
							<li><a href="#">信用卡</a></li>
							<li><a href="#">蚂蚁花呗</a></li>
							<li><a href="#">零钱通</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>商家服务</p>
						<ul>
							<li><a href="#">精选规则</a></li>
							<li><a href="#">商家入驻</a></li>
							<li><a href="#">商家中心</a></li>
							<li><a href="#">精选必修课</a></li>
							<li><a href="#">平台服务协议</a></li>
						</ul>
					</div>
					<div class="help-div">

					
					<div class="help-code">
						<p>帮助中心</p>
						<img src="../photos/erweima.png" />
						<div>youxuan客户端</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="readme-div">
			<div class="d-center">
				<ul>
					<li><a href="#">关于我们 </a>|</li>
					<li><a href="#">联系我们 </a>|</li>
					<li><a href="#">联系客服 </a>|</li>
					<li><a href="#">商家入驻 </a>|</li>
					<li><a href="#">营销中心 </a>|</li>
					<li><a href="#">手机youxuan </a>|</li>
					<li><a href="#">友情链接 </a>|</li>
					<li><a href="#">销售联盟 </a>|</li>
					<li><a href="#">youxuan社区 </a>|</li>
					<li><a href="#">youxuan公益 </a>|</li>
					<li><a href="#">English Site </a>|</li>
					<li><a href="#">Contact U</a></li>
				</ul>
				<p></p>
				<p></p>
			</div>
		</div>
	</body>
</html>

